<template>
  <view class="record">
    <view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/images/bg-6.png)` }"></view>
    <view class="record-content">
      <view class="card">
        <view class="title">预约成功！</view>
        <view class="image">
          <image src="/reservation-images/success.png" mode="widthFix" />
        </view>
        <view class="desc">您的预约已完成，届时请凭预约详情内二维码现场签到进场。</view>
      </view>
      <view class="buttons">
        <view style="margin-bottom: 37rpx;" @click.stop="handleDetail">
          <fh-button>查看预约详情</fh-button>
        </view>
        <view @click.stop="handleHome">
          <fh-button>返回首页</fh-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { baseUrl } from '@/reservation/config'
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import fhButton from '../components/fh-button.vue';
defineOptions({
  name: 'record',
})

const id = ref(0)

onLoad((options) => {
  id.value = options.id
  console.log(id.value)
})

const handleDetail = () => {
  uni.redirectTo({
    url: '/reservation/record/detail?id=' + id.value,
  })
}
const handleHome = () => {
  uni.reLaunch({ url: '/reservation/home/index' })
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
